<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <meta charset="utf-8" />--%>
<%--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">--%>
<%--    <!-- 引入 Bootstrap -->--%>
<%--    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>--%>
<%--    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">--%>
<%--    <!-- 引入 font-awesome -->--%>
<%--    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">--%>
<%--    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
<%--    <script type="application/javascript">--%>
<%--        function change(url,index){--%>
<%--            $(".list-group-item").removeClass("active");--%>
<%--            $(".list-group-item").eq(index).addClass("active");--%>
<%--            $("iframe").attr("src",url);--%>
<%--        }--%>
<%--    </script>--%>
<%--</head>--%>
<%--<body>--%>
<%--<nav class="navbar navbar-inverse" role="navigation">--%>
<%--    <div class="container-fluid">--%>
<%--        <ul class="nav navbar-nav navbar-left">--%>
<%--            <li>--%>
<%--                <a style="font-size: 26px;">宿舍管理系统-宿舍管理员</a>--%>
<%--            </li>--%>
<%--        </ul>--%>
<%--        <span style="color: #CCCCCC;font-size: 26px;position: relative;top: 5px;"></span>--%>
<%--        <ul class="nav navbar-nav navbar-right">--%>
<%--            <li>--%>
<%--                <a>欢迎您,${dormitoryAdmin.name}</a>--%>
<%--            </li>--%>
<%--            <li>--%>
<%--                <a href="/account?method=logout">安全退出</a>--%>
<%--            </li>--%>
<%--        </ul>--%>
<%--    </div>--%>
<%--</nav>--%>
<%--<div class="container-fluid">--%>
<%--    <div class="row">--%>
<%--        <div class="col-sm-2">--%>

<%--            <a href="javascript:void(0)" class="list-group-item active" onclick="change('/absent?method=init',0)">--%>
<%--						<span class="" aria-hidden="true">--%>
<%--							<i class="fa fa-bookmark fa-fw"></i>--%>
<%--						</span>学生缺寝登记--%>
<%--            </a>--%>
<%--            <a href="javascript:void(0)" class="list-group-item" onclick="change('/absent?method=list',1)">--%>
<%--						<span class="" aria-hidden="true">--%>
<%--							<i class="fa fa-bookmark-o fa-fw"></i>--%>
<%--						</span>学生缺寝记录--%>
<%--            </a>--%>

<%--        </div>--%>
<%--        <!--右边内容-->--%>
<%--        <iframe style="width: 81%; height: 600px; border: 0px;" src="/absent?method=init"></iframe>--%>
<%--    </div>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入 Bootstrap -->
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 font-awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body {
            font-family: "Segoe UI", Roboto, sans-serif;
            background: #f4f6f9;
        }

        .navbar-inverse {
            background: linear-gradient(to right, #2c3e50, #3498db);
            border: none;
            border-radius: 0;
        }

        .navbar-inverse .navbar-nav > li > a {
            color: #ffffff !important;
        }

        .navbar-inverse .navbar-nav > li > a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .list-group-item {
            border: none;
            border-radius: 0;
            padding: 14px 20px;
            font-size: 16px;
            transition: background 0.3s ease;
        }

        .list-group-item:hover {
            background-color: #e0f0ff;
            color: #007bff;
        }

        .list-group-item.active {
            background-color: #007bff;
            color: #fff !important;
        }

        .sidebar {
            background-color: #fff;
            height: 100%;
            border-right: 1px solid #ddd;
            box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
        }

        iframe {
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border-radius: 6px;
        }
    </style>

    <script type="application/javascript">
        function change(url, index) {
            $(".list-group-item").removeClass("active");
            $(".list-group-item").eq(index).addClass("active");
            $("iframe").attr("src", url);
        }
    </script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a style="font-size: 22px;"><i class="fa fa-cogs"></i> 宿舍管理系统 - 宿舍管理员</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a><i class="fa fa-user"></i> 欢迎您, ${dormitoryAdmin.name}</a>
            </li>
            <li>
                <a href="/account?method=logout"><i class="fa fa-sign-out"></i> 安全退出</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <!-- 左侧导航栏 -->
        <div class="col-sm-2 sidebar">
            <a href="javascript:void(0)" class="list-group-item active" onclick="change('/absent?method=init',0)">
                <i class="fa fa-bookmark fa-fw"></i> 学生缺寝登记
            </a>
            <a href="javascript:void(0)" class="list-group-item" onclick="change('/absent?method=list',1)">
                <i class="fa fa-bookmark-o fa-fw"></i> 学生缺寝记录
            </a>
        </div>

        <!-- 右侧内容展示区 -->
        <div class="col-sm-10">
            <iframe style="width: 100%; height: 600px; border: 0;" src="/absent?method=init"></iframe>
        </div>
    </div>
</div>
</body>
</html>
